<template>
  <div class="container">
    <a-card class="general-card">
      <template #title>用户管理</template>
      <template #extra>
        <a-button type="primary" @click="openAddUser">
          <template #icon><icon-plus /></template>
          新增用户
        </a-button>
      </template>
      
      <!-- 搜索区域 -->
      <a-form :model="searchForm" class="search-form" layout="inline">
        <a-form-item field="userName" label="用户名">
          <a-input v-model="searchForm.userName" placeholder="请输入用户名" allow-clear />
        </a-form-item>
        <a-form-item field="phone" label="手机">
          <a-input v-model="searchForm.phone" placeholder="请输入手机号" allow-clear />
        </a-form-item>
        <a-form-item field="email" label="邮箱">
          <a-input v-model="searchForm.email" placeholder="请输入邮箱" allow-clear />
        </a-form-item>
        <a-form-item field="status" label="状态">
          <a-select v-model="searchForm.status" placeholder="请选择状态" allow-clear>
            <a-option value="">全部</a-option>
            <a-option value="1">启用</a-option>
            <a-option value="0">停用</a-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="search" :loading="loading">
              <template #icon><icon-search /></template>
              搜索
            </a-button>
            <a-button @click="reset" :loading="loading">
              <template #icon><icon-refresh /></template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <!-- 表格区域 -->
      <a-table 
        :loading="loading"
        :data="userList" 
        :columns="columns" 
        :pagination="{
          ...pagination,
          current: pagination.current || 1,
          total: pagination.total || 0,
          pageSize: pagination.pageSize || 10
        }"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
        row-key="id"
        :row-selection="rowSelection"
        :bordered="false"
        stripe
      >
        <template #avatar="{ record }">
          <a-avatar 
            v-if="record.avatar" 
            :size="40" 
            :image-url="record.avatar" 
            @error="() => handleAvatarError(record)"
          >
            <template #icon><icon-user /></template>
          </a-avatar>
          <a-avatar v-else :size="40">
            <template #icon><icon-user /></template>
          </a-avatar>
        </template>
        <template #userType="{ record }">
          <a-tag :color="record.userType === '系统管理员' ? 'blue' : 'green'">
            {{ record.userType }}
          </a-tag>
        </template>
        <template #status="{ record }">
          <a-tag :color="record.status === '1' ? 'green' : 'red'">
            {{ record.status === '1' ? '启用' : '停用' }}
          </a-tag>
        </template>
        <template #operations="{ record }">
          <a-space>
            <a-button 
              type="text" 
              size="small" 
              @click="handleEdit(record)"
              :disabled="record.userName === 'admin' || record.userType === '系统管理员'"
            >
              <template v-if="record.userName === 'admin' || record.userType === '系统管理员'">
                编辑
              </template>
              <template v-else>
                编辑
              </template>
            </a-button>
            <a-divider direction="vertical" />
            <a-popconfirm
              content="确定要删除这个用户吗？"
              @ok="handleDelete(record)"
              :disabled="record.userName === 'admin' || record.userType === '系统管理员'"
            >
              <a-button 
                type="text" 
                status="danger" 
                size="small"
                :disabled="record.userName === 'admin' || record.userType === '系统管理员'"
              >
                删除
              </a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>

    <!-- 新增/编辑用户弹窗 -->
    <a-modal
      v-model:visible="modalVisible"
      :title="modalTitle"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
      :mask-closable="false"
      :unmount-on-close="true"
      :ok-loading="modalLoading"
    >
      <a-form 
        ref="userFormRef"
        :model="userForm" 
        :rules="rules"
        layout="vertical"
      >
        <a-form-item field="userName" label="用户名" required>
          <a-input 
            v-model="userForm.userName" 
            placeholder="请输入字母、数字或下划线"
            :disabled="userForm.id !== undefined"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="nickName" label="昵称">
          <a-input v-model="userForm.nickName" placeholder="请输入昵称" allow-clear />
        </a-form-item>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="phone" label="手机号码" required>
              <a-input v-model="userForm.phone" placeholder="请输入手机号码" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="email" label="邮箱" required>
              <a-input v-model="userForm.email" placeholder="请输入邮箱" allow-clear />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="role_id" label="用户角色" required>
              <a-select 
                v-model="userForm.role_id" 
                placeholder="请选择用户角色"
                :loading="roleLoading"
              >
                <a-option 
                  v-for="role in roleList" 
                  :key="role.value" 
                  :value="role.value"
                  :disabled="role.isAdmin"
                >
                  {{ role.label }}
                  <span v-if="role.isAdmin" style="color: #ff4d4f; margin-left: 4px;">(管理员角色)</span>
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="status" label="状态">
              <a-radio-group v-model="userForm.status" type="button">
                <a-radio value="1">启用</a-radio>
                <a-radio value="0">停用</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item field="password" label="密码" v-if="!userForm.id" required>
          <a-input v-model="userForm.password" placeholder="请输入至少8位的密码，必须包含字母和数字" allow-clear type="password" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineComponent, computed } from 'vue';
import { Message, Button } from '@arco-design/web-vue';
import { IconUser } from '@arco-design/web-vue/es/icon';
import { useUserStore } from '@/stores/user';
import { useRoleStore } from '@/stores/role';
import { storeToRefs } from 'pinia';
import { IconPlus, IconDelete, IconSearch, IconRefresh } from '@arco-design/web-vue/es/icon';
import request from '@/utils/http';

// 定义组件名称
defineComponent({
  name: 'UserMgmt'
});

const userStore = useUserStore();
const { loading, userList, pagination, roleLoading } = storeToRefs(userStore);
// 单独获取roleList，确保是直接引用store中的数据
const roleList = computed(() => userStore.roleList || []);

// 搜索表单数据
const searchForm = reactive({
  userName: '',
  phone: '',
  email: '',
  status: ''
});

// 表格列定义
const columns = [
  {
    title: '头像',
    dataIndex: 'avatar',
    slotName: 'avatar',
    width: 80,
  },
  {
    title: '用户名',
    dataIndex: 'userName',
  },
  {
    title: '昵称',
    dataIndex: 'nickName',
  },
  {
    title: '角色类型',
    dataIndex: 'userType',
    slotName: 'userType',
  },
  {
    title: '手机号码',
    dataIndex: 'phone',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status',
  },
  {
    title: '操作',
    dataIndex: 'operations',
    slotName: 'operations',
    width: 150,
  }
];

// 行选择配置
const rowSelection = {
  type: 'checkbox',
  showCheckedAll: true,
};

// 弹窗相关
const modalVisible = ref(false);
const modalTitle = ref('新增用户');
const modalLoading = ref(false);
const userForm = reactive({
  id: undefined,
  userName: '',
  nickName: '',
  phone: '',
  email: '',
  role_id: '',
  status: '1',
  password: ''
});

const userFormRef = ref(null);

// 表单校验规则
const rules = {
  userName: [
    { required: true, message: '请输入用户名' },
    { minLength: 3, message: '用户名最少3个字符' },
    { maxLength: 20, message: '用户名最多20个字符' },
    { 
      match: /^[a-zA-Z0-9_]+$/, 
      message: '用户名只能包含字母、数字和下划线' 
    }
  ],
  nickName: [
    { maxLength: 30, message: '昵称最多30个字符' }
  ],
  phone: [
    { required: true, message: '请输入手机号码' },
    { 
      match: /^1[3-9]\d{9}$/, 
      message: '请输入正确的手机号码',
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入邮箱' },
    { 
      match: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/, 
      message: '请输入正确的邮箱地址',
      trigger: 'blur'
    }
  ],
  role_id: [
    { required: true, message: '请选择用户角色' }
  ],
  password: [
    { 
      required: (record) => record.id === undefined, 
      message: '请输入密码' 
    },
    { minLength: 8, message: '密码最少8个字符' },
    { maxLength: 20, message: '密码最多20个字符' },
    { 
      match: /^(?=.*[a-zA-Z])(?=.*\d).+$/,
      message: '密码必须包含字母和数字'
    }
  ]
};

// 加载用户列表数据
async function loadData() {
  try {
    // 准备API参数
    const params = {
      current: pagination.value.current || 1,
      pageSize: pagination.value.pageSize || 10,
      keyword: searchForm.userName || '',
      status: searchForm.status
    };
    
    // 添加额外的筛选条件（如果有）
    if (searchForm.phone) {
      params.phone = searchForm.phone;
    }
    
    if (searchForm.email) {
      params.email = searchForm.email;
    }
    
    // 调用store方法获取用户列表
    await userStore.getUserList(params);
    
    // 检查是否有数据返回
    if (userList.value.length === 0 && pagination.value.total > 0) {
      // 如果当前页没有数据，但总数大于0，说明可能是最后一页数据被删除
      // 自动回到上一页
      if (pagination.value.current > 1) {
        pagination.value.current -= 1;
        await loadData(); // 重新加载前一页
      }
    }
  } catch (error) {
    Message.error('加载用户列表失败: ' + (error.message || '未知错误'));
  }
}

// 搜索
async function search() {
  // 重置为第一页
  pagination.value.current = 1;
  
  // 显示加载提示
  Message.loading('搜索中...', 0);
  
  try {
    await loadData();
    Message.clear(); // 清除loading提示
  } catch (error) {
    Message.clear();
    Message.error('搜索失败，请稍后重试');
  }
}

// 重置
function reset() {
  // 清空搜索表单
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = '';
  });
  
  // 重置为第一页
  pagination.value.current = 1;
  
  // 重新加载数据
  Message.loading('重置中...', 0);
  loadData().finally(() => {
    Message.clear();
  });
}

// 页码变化
function onPageChange(page) {
  pagination.value.current = page;
  loadData();
}

// 每页大小变化
function onPageSizeChange(pageSize) {
  pagination.value.pageSize = pageSize;
  pagination.value.current = 1;
  loadData();
}

// 初始化
onMounted(async () => {
  // 只加载用户列表，不加载角色列表
  try {
    await loadData();
  } catch (error) {
    Message.error('加载数据失败');
  }
});

// 打开新增用户弹窗
const openAddUser = async () => {
  modalTitle.value = '新增用户';
  // 重置表单
  Object.assign(userForm, {
    id: undefined,
    userName: '',
    nickName: '',
    phone: '',
    email: '',
    role_id: '2', // 默认设置为员工角色
    status: '1',
    password: '' // 不设置默认密码，让用户自己输入
  });
  
  // 打开弹窗前先加载角色列表
  modalLoading.value = true;
  try {
    console.log('打开新增用户弹窗，获取最新角色列表');
    // 强制重新获取角色列表，不使用缓存
    await loadRoleList();
    logRoleList(); // 添加日志函数
    modalVisible.value = true;
  } catch (error) {
    console.error('获取角色列表失败:', error);
    Message.error('获取角色列表失败');
  } finally {
    modalLoading.value = false;
  }
};

// 编辑用户
const handleEdit = async (record) => {
  // 如果是系统管理员，不允许编辑
  if (record.userName === 'admin' || record.userType === '系统管理员') {
    Message.warning('系统管理员信息只能在个人中心修改');
    return;
  }
  
  modalTitle.value = '编辑用户';
  
  // 获取角色ID，考虑多种可能的字段名
  const roleId = record.role_id || 
                record.roleId || 
                (record.role && record.role.id) || 
                (record.role && record.role.role_id) || 
                '2';  // 默认使用'2'表示员工角色
  
  // 复制用户数据到表单，确保昵称字段正确获取
  Object.assign(userForm, {
    id: record.id,
    userName: record.userName,
    nickName: record.nickName || record.real_name || record.realName || 
             record.nickname || record.nick_name || record.name || 
             record.display_name || record.displayName || '',
    // 确保当值为"未设置"时，设置为空字符串
    phone: record.phone === '未设置' ? '' : record.phone,
    email: record.email === '未设置' ? '' : record.email,
    role_id: roleId.toString(), // 确保角色ID是字符串
    status: record.status,
    password: ''
  });
  
  // 打开弹窗前先加载角色列表
  modalLoading.value = true;
  try {
    console.log('打开编辑用户弹窗，获取最新角色列表');
    // 强制重新获取角色列表，不使用缓存
    await loadRoleList();
    logRoleList(); // 添加日志函数
    modalVisible.value = true;
  } catch (error) {
    console.error('获取角色列表失败:', error);
    Message.error('获取角色列表失败');
  } finally {
    modalLoading.value = false;
  }
};

// 删除用户
const handleDelete = async (record) => {
  // 如果是系统管理员，不允许删除
  if (record.userName === 'admin' || record.userType === '系统管理员') {
    Message.warning('系统管理员不可删除');
    return;
  }
  
  // 显示删除中提示
  Message.loading(`正在删除用户 ${record.userName}...`, 0);
  
  try {
    await userStore.deleteUser(record.id);
    Message.clear();
    Message.success(`用户 ${record.userName} 已删除`);
    
    // 重新获取用户列表
    search();
  } catch (error) {
    Message.clear();
    Message.error('删除用户失败: ' + (error.message || '未知错误'));
  }
};

// 弹窗确认
const handleModalOk = async () => {
  if (!userFormRef.value) return;
  
  // 验证表单
  let isValid = true;
  try {
    modalLoading.value = true;
    
    // 兼容性处理表单验证
    if (typeof userFormRef.value.validate === 'function') {
      await userFormRef.value.validate();
    } else {
      // 简单的手动验证
      if (!userForm.userName) {
        Message.error('请输入用户名');
        isValid = false;
      } else if (!/^[a-zA-Z0-9_]+$/.test(userForm.userName)) {
        Message.error('用户名只能包含字母、数字和下划线');
        isValid = false;
      } else if (!userForm.phone) {
        Message.error('请输入手机号码');
        isValid = false;
      } else if (!/^1[3-9]\d{9}$/.test(userForm.phone)) {
        Message.error('请输入正确的手机号码');
        isValid = false;
      } else if (!userForm.email) {
        Message.error('请输入邮箱');
        isValid = false;
      } else if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(userForm.email)) {
        Message.error('请输入正确的邮箱地址');
        isValid = false;
      } else if (!userForm.role_id) {
        Message.error('请选择用户角色');
        isValid = false;
      } else if (!userForm.id && !userForm.password) {
        Message.error('请输入密码');
        isValid = false;
      } else if (!userForm.id && userForm.password && userForm.password.length < 8) {
        Message.error('密码最少8个字符');
        isValid = false;
      } else if (!userForm.id && userForm.password && !/^(?=.*[a-zA-Z])(?=.*\d).+$/.test(userForm.password)) {
        Message.error('密码必须包含字母和数字');
        isValid = false;
      }
    }
    
    if (!isValid) return;
    
    // 显示操作中提示
    Message.loading('处理中...', 0);
    
    if (userForm.id) {
      // 编辑用户
      await userStore.updateUser(userForm.id, userForm);
      Message.clear();
      // 延长成功提示显示时间到3秒
      Message.success('用户更新成功');
    } else {
      // 新增用户
      await userStore.createUser(userForm);
      Message.clear();
      // 延长成功提示显示时间到3秒
      Message.success('用户创建成功');
    }
    
    // 关闭弹窗并刷新数据
    modalVisible.value = false;
    search();
  } catch (error) {
    // 清除loading消息
    Message.clear();
    
    // 区分API错误和表单验证错误
    if (error.message && error.message.includes('验证')) {
      Message.error('表单验证失败: ' + error.message);
    } else {
      Message.error(error.message || '操作失败，请稍后重试');
    }
  } finally {
    modalLoading.value = false;
  }
};

// 弹窗取消
const handleModalCancel = () => {
  modalVisible.value = false;
  
  // 清空表单数据，避免数据残留
  setTimeout(() => {
    Object.assign(userForm, {
      id: undefined,
      userName: '',
      nickName: '',
      phone: '',
      email: '',
      role_id: '',
      status: '1',
      password: ''
    });
  }, 200);
};

// 处理头像加载错误
function handleAvatarError(record) {
  // 标记头像加载失败，这样模板会使用默认图标
  record.avatar = '';
}

// 加载角色列表
async function loadRoleList() {
  try {
    // 开始加载
    roleLoading.value = true;
    Message.loading('正在加载角色列表...', 0);

    console.log('开始获取角色列表...');
    // 直接使用store提供的方法获取最新角色列表
    const roles = await userStore.getRoleList();
    console.log('组件中收到角色列表:', roles);
    
    // 清除加载消息
    Message.clear();
    
    // 检查是否有至少一个角色
    if (!roles || roles.length === 0) {
      console.warn('没有获取到任何角色，将使用默认角色');
      Message.warning('没有可用的角色，将使用默认角色');
    }
    
    return roles;
  } catch (error) {
    // 关闭加载消息
    Message.clear();
    console.error('获取角色列表出错:', error);
    Message.error('获取角色列表失败');
    return [];
  } finally {
    roleLoading.value = false;
  }
}

// 添加一个函数来记录当前角色列表
function logRoleList() {
  console.log('当前roleList内容:', roleList.value);
  console.log('userStore中的roleList:', userStore.roleList);
  if (roleList.value && roleList.value.length) {
    console.log('角色列表项数:', roleList.value.length);
    roleList.value.forEach((role, index) => {
      console.log(`角色[${index}]:`, role.value, role.label);
    });
  } else {
    console.warn('角色列表为空!');
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/variables.less';

.search-form {
  padding-bottom: 20px;
}

.form-item {
  margin-right: 16px;
}

.user-status {
  display: inline-block;
  padding: 0 4px;
  line-height: 18px;
  border-radius: 2px;
  font-size: 12px;
  color: #fff;
  margin-right: 6px;
  background-color: #21b53f;

  &.inactive {
    background-color: #d9d9d9;
  }

  &.locked {
    background-color: #f5222d;
  }
}

.user-role {
  display: inline-block;
  padding: 0 8px;
  line-height: 20px;
  border-radius: 2px;
  font-size: 12px;
  color: #165dff;
  background-color: #e8f3ff;
  
  &.admin {
    color: #fb6b53;
    background-color: #ffece8;
  }
}
</style>